import React, {memo} from 'react'
// 合理利用key
// 逆序添加、删除的时候，不要用index索引作为key
// 当有输入类的dom节点时，更加关注key
const List = ({data}) => {
    console.log('list render');
    return (
        <ul
            style={{width: 400}}
        >
            {
                data.map((item,index)=>(
                    <li
                        key={item.title}
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            borderBottom: '1px solid #ccc'
                        }}
                    >
                        <input type="checkbox" />
                        <span>{item.title}</span>
                        <span>{item.time}</span>
                    </li>
                ))
            }
        </ul>
    )
}

export default memo(List)